<template>
    <Modal
        title="选择开票账单"
        :value="show"
        :mask-closable="false"
        :width="1000"
        @on-visible-change="setVisibility">
        <Form ref="filterData" :model="filterData">
          <Row class='flex-style' style='padding: 15px 0;'>
            <!-- <Col span='10'>
                签约商户
                <Select
                    v-model="filterData.clientId"
                    class="flex-items"
                    filterable
                    remote
                    clearable
                    :remote-method="remoteMethodcClient"
                    :loading="clientLoading">
                    <Option v-for="(item, key, index) in clients" :value="item.value" :key="index">{{ item.label }}</Option>
                </Select>
            </Col> -->
            <Col span='20'>
                创建日期
                <DatePicker 
                class="flex-items" 
                placeholder="开始时间" 
                type="date"
                @on-change="beginTimeChange"
                v-model="filterData.createStartTime"></DatePicker>
                &nbsp;-&nbsp;
                <DatePicker 
                class="flex-items" 
                placeholder="结束时间" 
                type="date" 
                @on-change="endTimeChange"
                v-model="filterData.createEndTime"></DatePicker>
            </Col>
            
            <Col span='4'>
                <Button type="primary" @click="getClientList">搜索</Button>
            </Col>
          </Row>
        </Form>
      <Table border ref="selection" :columns="columns" :data="tableData" @on-selection-change="handleSelect" @on-select-all="handleAll"></Table>
      <p class="text-center margin-top-20">
            <!--分页-->
            <Page :total="total"
            :page-size="size"
            :current.sync="currentPage"
            show-elevator
            @on-change="getClientList"
            show-total style="text-align:center"></Page>
            <!--分页end-->
        </p>
      <Row slot="footer">
        <Button type="text" @click="setVisibility(false)">取消</Button>
        <Button type="primary" @click="handleSubmit" :loading="isLoading">确定</Button>
      </Row>
    </Modal>
</template>

<script>
import { http, api } from '@/libs/http'
import validate from '@/libs/validate'
import moment from 'moment'
export default {
  name: 'create-merchant-modal',
  props: {
    show: Boolean,
    tags: Array,
    device: Array

  },
  data () {
    return {
      isLoading: false,
      models: [], // 设备种类
      contractTypeList: [], // 选择设备
      clients: [], // 商户
      clientLoading: false, // 签约商户
      bill: [], // 账单
      total: 0,
      size: 20,
      currentPage: 1,
      columns: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          minWidth: 126,
          align: 'center',
          title: '账单编号',
          key: 'seqno'
        },
        {
          minWidth: 100,
          align: 'center',
          title: '合同名称',
          key: 'contractName'
        },
        {
          minWidth: 100,
          align: 'center',
          title: '账单月份',
          key: 'month'
        },
        {
          minWidth: 100,
          align: 'center',
          title: '账单类型/结算方式',
          render: (h, p) => {
            return <span>{p.row.typeName + '-' + p.row.contractPaymentTypeName}</span>
          }
        },
        {
          minWidth: 120,
          title: '覆盖范围',
          align: 'center',
          key: 'contractAreaName'
        },
        {
          title: '未开票金额',
          minWidth: 80,
          align: 'center',
          key: 'totalUnInvoiceAmount'
        }
      ], // 列表结构
      tableData: [], // 列表数据
      filterData: {

      }, // 搜索
      rules: {
        name: { required: true },
        telephone: [
          { required: true },
          { validator: validate.validPhone, trigger: 'change' }
        ]
      }
    }
  },
  computed: {
    aa: function () {

    }
  },
  created () {
    this.getClientList(1)
  },
  watch: {
    device (val) {
      this.getClientList(1)
    }
  },
  methods: {
    setVisibility (val) {
      this.$emit('update:show', val)
    }, // 回显数据
    handleSubmit () {
      this.setVisibility(false)
      // this.bill = this.bill.filter(item=>!this.$props.device.some(ele=>ele==item));
      // this.$emit('update:device', this.bill);
      this.$emit('feeData', this.bill)
      // this.tableData = [];
    }, // 设备提交
    async fetchModels () {
      this.models = await http.fetch(this, api.ticket_device_model, null, null)
    }, // 设备分类
    handleSelect (selection) {
      this.bill = selection.map(item => {
        return item.id
      })
    },
    handleAll (selection) {

    },
    remoteMethodcClient (query) {
      if (query !== '') {
        this.clientLoading = true
        this.getClients(query)
      } else {
        this.clients = []
      }
    }, // 签约商户select
    async getClients (query) {
      let res = await http.fetch(this, api.client_list, null, {keyword: query})
      this.clientLoading = false
      this.clients = res.rows.map(item => {
        return {
          value: item.id,
          label: item.name
        }
      })
    }, // 商户
    async getClientList (page) {
      let arr = this.$props.device || []

      if (page === 1) {
        this.currentPage = 1
      }
      this.filterData.clientId = this.$store.state.user.clientId
      this.filterData.billIds = JSON.stringify(this.$props.device)
      this.filterData.limit = this.size
      this.filterData.offset = this.size * (page - 1) || 0
      this.loading = true
      let res = await http.fetch(this, api.bill_list, null, this.filterData)
      this.total = res.count
      this.tableData = res.rows.filter(item => !arr.some(ele => ele === item.id))
      // this.tableData = res.rows.map( item => {
      //     let flag = false;
      //     arr.forEach(i => {
      //         if(i == item.id){
      //             flag = true;
      //             return;
      //         }
      //     })
      //     if(flag) {
      //         item._checked = true;
      //     }
      //     return item
      // })
    }, // 分页
    beginTimeChange (val, date) {
      if (!val) return
      this.filterData.createStartTime = moment(this.filterData.createStartTime).format('YYYY-MM-DD HH:mm:ss')
    }, // 开始时间
    endTimeChange (val, date) {
      if (!val) return
      this.filterData.createEndTime = moment(this.filterData.createEndTime).format('YYYY-MM-DD HH:mm:ss')
    } // 结束时间
  }
}
</script>
<style lang="less" scoped>
  .flex-style {
      & > .ivu-col {
          display: flex;
          align-items: center;
          .flex-items {
              flex: 1;
              margin-left: 5px;
          }
      }
  }
</style>
